<template>
	<div class="p-6 space-y-6">

		<el-form :inline="true" :model="filters" class="mb-4">
			<el-form-item label="客户名称">
				<el-input v-model="filters.customer" placeholder="请输入客户名称" size="small" style="width: 200px"
					clearable />
			</el-form-item>
			<el-form-item label="出库单号">
				<el-input v-model="filters.code" placeholder="请输入出库单号" size="small" style="width: 200px" clearable />
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" @click="applyFilters">搜索</el-button>
				<el-button size="small" @click="resetFilters">重置</el-button>
			</el-form-item>
		</el-form>

		<el-button type="primary" size="small" class="mb-4" @click="openCreateDialog">新建出库单</el-button>

		<el-table :data="filteredOutbounds" border>
			<el-table-column type="index" label="#" width="50" />
			<el-table-column prop="code" label="出库单号" />
			<el-table-column prop="customer" label="客户名称" />
			<el-table-column prop="product" label="产品" />
			<el-table-column prop="quantity" label="数量" />
			<el-table-column prop="created" label="出库时间" />
			<el-table-column label="操作">
				<template #default="{ row }">
					<el-button size="small" @click="editOutbound(row)">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog v-model="editDialog" :title="isNew ? '新建出库单' : '编辑出库单'" width="500px">
			<el-form :model="currentOutbound" label-width="80px" :rules="rules" ref="formRef">
				<el-form-item label="出库单号" prop="code">
					<el-input v-model="currentOutbound.code" :disabled="!isNew" />
				</el-form-item>
				<el-form-item label="客户" prop="customer">
					<el-input v-model="currentOutbound.customer" />
				</el-form-item>
				<el-form-item label="产品" prop="product">
					<el-input v-model="currentOutbound.product" />
				</el-form-item>
				<el-form-item label="数量" prop="quantity">
					<el-input-number v-model="currentOutbound.quantity" :min="1" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="saveOutbound">保存</el-button>
					<el-button @click="editDialog = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const filters = ref({ customer: '', code: '' })
const outbounds = ref([])
const formRef = ref()
const isNew = ref(false)

const filteredOutbounds = computed(() => {
	return outbounds.value.filter(item => {
		const matchCustomer = filters.value.customer ? item.customer.includes(filters.value.customer) : true
		const matchCode = filters.value.code ? item.code.includes(filters.value.code) : true
		return matchCustomer && matchCode
	})
})

const applyFilters = () => { }
const resetFilters = () => { filters.value = { customer: '', code: '' } }

const editDialog = ref(false)
const currentOutbound = ref({ code: '', customer: '', product: '', quantity: 1, created: '' })

const openCreateDialog = () => {
	isNew.value = true
	currentOutbound.value = { code: 'OUT' + Math.floor(Math.random() * 100000), customer: '', product: '', quantity: 1, created: new Date().toLocaleString() }
	editDialog.value = true
}

const editOutbound = (row) => {
	isNew.value = false
	currentOutbound.value = { ...row }
	editDialog.value = true
}

const saveOutbound = () => {
	formRef.value.validate(valid => {
		if (!valid) return

		if (isNew.value) {
			outbounds.value.unshift({ ...currentOutbound.value })
			ElMessage.success('已新建出库单')
		} else {
			const index = outbounds.value.findIndex(i => i.code === currentOutbound.value.code)
			if (index !== -1) {
				outbounds.value[index] = { ...currentOutbound.value }
				ElMessage.success('出库单已保存')
			}
		}
		editDialog.value = false
	})
}

const rules = {
	code: [{ required: true, message: '请输入出库单号', trigger: 'blur' }],
	customer: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
	product: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
	quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }]
}

onMounted(() => {
	const products = ['EUV光刻胶', 'G线光刻胶', '氧化硅抛光液', '蚀刻液', '去胶剂']
	const customers = ['华为', '中兴', '京东方', '台积电', '长江存储']
	outbounds.value = Array.from({ length: 15 }).map((_, i) => ({
		code: 'OUT' + (10000 + i),
		customer: customers[Math.floor(Math.random() * customers.length)],
		product: products[Math.floor(Math.random() * products.length)],
		quantity: Math.floor(Math.random() * 100) + 1,
		created: new Date(new Date().getTime() - Math.random() * 1000 * 60 * 60 * 24 * 30).toLocaleString()
	}))
})
</script>

<style scoped>
.text-xl {
	font-size: 1.25rem;
}
</style>
  
